<template>
    <div class="import-container">
        <el-tag>
            <i class="el-icon-download" />
            <a :href="'/static/attendance.xlsx'">点击下载模版</a>
        </el-tag>
        <div class="import-panel">
            <el-upload
                ref="upload"
                class="upload-demo"
                drag
                :action="BASE_API+'/attendance/attendance-record/daily/insert'"
                :on-success="fileUploadSuccess"
                :auto-upload="false"
                :on-change="handleUploadChange"
                :file-list="fileList"
                :before-upload="beforeUpload"
                >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text"><el-button slot="trigger" size="small" type="primary">选取文件</el-button></div>
            <div class="el-upload__tip" slot="tip">请根据模板上传文件，只能上传xls/xlsx文件，且不超过1M</div>
            </el-upload>
            <el-button :loading="loading" class="uploadbtn" size="small" type="success" @click="submitUpload">确认上传</el-button>
        </div>
        <div class="table-panel">
            <div class="import-tag">文件内容已识别（{{success}}条）</div>
            <el-table ref="filterTable" :data="tableData" style="width: 100%">
            <el-table-column
                prop="id"
                label="序号"
                width="55px"
                align="center"
                type="index"
                >
            </el-table-column>
            <el-table-column
                prop="serviceCorporationName"
                label="劳务公司名称"
                min-width="120px"
                align="center"
                >
            </el-table-column>
            <el-table-column
                prop="teamName"
                label="班组名称"
                min-width="90px"
                align="center"
                >
            </el-table-column>
            <el-table-column
                prop="personName"
                label="姓名"
                align="center"
                >
            </el-table-column>
            <el-table-column
                prop="date"
                label="日期"
                min-width="90px"
                align="center"
                sortable
                >
            </el-table-column>
            <el-table-column
                prop="startTime"
                label="开始时间"
                align="center"
                >
            </el-table-column>
            <el-table-column
                prop="endTime"
                label="结束时间"
                align="center"
                >
            </el-table-column>
            <el-table-column prop="total" label="合计" align="center">
                <template slot-scope="scope">
                    <div>{{ scope.row.total }}小时</div>
                </template>
            </el-table-column>
            <el-table-column
                prop="operation"
                label="操作"
                align="center"
                min-width="90px"
                fixed="right"
                >
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row,index)" type="text" icon="el-icon-delete">删除</el-button>
                </template>
            </el-table-column>
            </el-table>
            <!-- <el-row class="page">
                <div class="page-tag">
                    共{{ Math.ceil(total / pageSize) }}页/{{ total }}条数据
                </div>
                <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage"
                    :page-sizes="[10, 20, 50]"
                    :page-size="pageSize"
                    layout="sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </el-row> -->
        </div>
        <!-- 调整弹窗 -->
        <!-- <el-dialog
        class="updata-dialog"
        title="调整考勤"
        :visible.sync="dialogFormVisible"
        >
        <el-form :model="dialogForm" :inline="true">
            <el-form-item label-width="120px" label="考勤开始时间：" prop="startTime">
            <el-time-picker
                v-model="dialogForm.startTime"
                type="datetime"
                placeholder="选择开始时间"
                value-format="HH:mm:ss"
            >
            </el-time-picker>
            </el-form-item>
            <el-form-item label-width="120px" label="考勤结束时间：" prop="endTime">
            <el-time-picker
                v-model="dialogForm.endTime"
                type="datetime"
                placeholder="选择结束时间"
                value-format="HH:mm:ss"
            >
            </el-time-picker>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="confirmDialog">确 定</el-button>
        </div>
        </el-dialog> -->
    </div>
</template>

<script>
import {deleteMonthAttendanceList} from '@/api/attendance'
export default {
    data(){
        return{
            success:0,
            currentPage:1,
            pageSize:10,
            fileList:[],
            total:null,
            tableData:[],
            loading:false,
            dialogFormVisible: false,
            BASE_API:process.env.BASE_API,
            dialogForm: {
                startTime: "09:00",
                endTime: "18:00",
                // mode: 0,
                // count: 1,
            },
            index:null
        }
    },
    methods:{
        fileUploadSuccess(res){
            if (res.success === true) {
                this.$message({
                    type: "success",
                    message: "上传成功"
                });
                this.tableData = res.data.data
                this.success = res.data.success
            }else{
                this.$message({
                    type: "error",
                    message: res.message
                });
            }
            // this.loading = false;
        },
        submitUpload(){
            // this.importBtnDisabled = true;
            if(this.fileList.length){
                console.log("object");
                // this.loading = true;
                this.$refs.upload.submit();
            }
        },
        beforeUpload(file){
            const fileType = file.name.substring(file.name.lastIndexOf('.'))
            if (fileType.toLowerCase() != '.xls' && fileType.toLowerCase() != '.xlsx') {
                this.$message.error('文件必须为.xls或.xlsx类型')
                this.fileList = []
                // this.loading=false
                return false
            }
        },
         // 限制文件上传的个数只有一个，获取上传列表的最后一个
        handleUploadChange(file, fileList) {
            if (fileList.length > 0) {
                this.fileList = [fileList[fileList.length - 1]] // 这一步，是展示最后一次选择的文件
            }
        },
        handleClick(row,index) {
            console.log(row);
            this.$confirm("是否删除" + row.personName +row.date+ "的日考勤?", "日考勤删除", {
                    confirmButtonText: "确认",
                    cancelButtonText: "取消",
                    type: "warning",
                }).then(res=>{
                    deleteMonthAttendanceList({date:row.date,personId:row.personId}).then(res=>{
                        this.$message({
                            type: "success",
                            message: "删除成功!",
                        });
                        this.tableData.splice(index, 1)
                    }).catch(() => {
                        this.$message({
                            type: "error",
                            message: res.message,
                        });
                    });
                }).catch(res=>{
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
            })
        },
    }
}
</script>